<template>
  <div class="list-container">

    <el-form class="search-panel" v-model="formData" :inline="true">
      <el-form-item label="出勤时间：">
        <el-date-picker
          @change="changeMonth"
          v-model="formData.date"
          type="month"
          placeholder="选择出勤时间"
          value-format="yyyy-MM">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table-panel">
      <el-breadcrumb v-if="personName" class="bread" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>{{serviceCorporationName}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{teamName}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{personName}}</el-breadcrumb-item>
      </el-breadcrumb>
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column type="index" align="center" width="55" label="序号">
        </el-table-column>
        <el-table-column prop="day" min-width="100" label="出勤日期" align="center">
        </el-table-column>
        <el-table-column prop="time" min-width="120" label="考勤时间" align="center">
        </el-table-column>
        <el-table-column align="center" min-width="80" label="合计">
          <template slot-scope="scope">
            <div>{{ scope.row.total }}小时</div>
          </template>
        </el-table-column>
        <el-table-column label="参考生活费" min-width="100" align="center">
          <template slot-scope="scope">
            <div>￥{{scope.row.alimony}}</div>
          </template>
        </el-table-column>
        <el-table-column label="参考工资" min-width="100" align="center">
          <template slot-scope="scope">
            <div>￥{{scope.row.wage}}</div>
          </template>
        </el-table-column>
        <el-table-column label="实际生活费" min-width="100" align="center">
          <template slot-scope="scope">
            <div>￥{{scope.row.actualAlimony}}</div>
          </template>
        </el-table-column>
        <el-table-column label="实际工资" min-width="100" align="center">
          <template slot-scope="scope">
            <div>￥{{scope.row.actualWage}}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column min-width="100" label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-circle-check"
              >确认</el-button
            >
            <el-button
              @click.native.prevent="checkRow(scope.row, scope.$index)"
              type="text"
              icon="el-icon-edit"
              >调整</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <el-row class="page">
        <div class="page-tag">
          共{{ Math.ceil(totalData / pageSize) }}页/{{ totalData }}条数据
        </div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          layout="sizes, prev, pager, next, jumper"
          :total="totalData"
        >
          >
        </el-pagination>
      </el-row>
    </div>
    <div v-if="this.workflowApplyId && this.workForm.applyStatus != 5" class="table-panel">
      <div class="details-steps">
        <el-steps
          :active="
            getCurrentActive(
              workForm.workflowNodeList,
              workForm.currentWorkflowNode
            )
          "
          :process-status="processStatus"
          :finish-status="finishStatus"
        >
          <el-step
            v-for="workflowNode in workForm.workflowNodeList"
            :key="workflowNode.applyNodeId"
          >
          <template slot="title">
            <div class="steps-title">{{workflowNode.workflowNodeName}}</div>
          </template>
            <template slot="description">
              <p v-if="workflowNode.examineUserName != null">
                <span>审批人: </span>
                {{ workflowNode.examineUserName }}
              </p>
              <p v-if="workflowNode.examineReason != null">
                <span>审批反馈: </span
                >{{ workflowNode.examineReason }}
              </p>
              <p v-if="workflowNode.examineUserName == null">
                <span>节点审批人: </span
                >{{
                  workflowNode.workflowNodeUserList
                    .map((ele) => ele.examineUserName)
                    .join()
                }}
              </p>
            </template>
          </el-step>
        </el-steps>
      </div>
    </div>
    <!-- 调整弹窗 -->
    <el-dialog
      class="small-dialog"
      width="600px"
      title="调整日工资"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="dialogForm" :inline="true" label-width="100px">
        <div class="tag">参考工资</div>
        <div class="inline-form">
        <el-form-item label="参考日工资：">
          <el-input disabled v-model="dialogForm.wage"></el-input>
        </el-form-item>
        <el-form-item label="参考生活费：">
          <el-input disabled v-model="dialogForm.alimony"></el-input>
        </el-form-item>
        </div>
        <div class="tag">实际工资</div>
        <div class="inline-form">
        <el-form-item label="实际日工资：">
          <el-input v-model="dialogForm.actualDailyWage"></el-input>
        </el-form-item>
        <el-form-item label="实际生活费：">
          <el-input v-model="dialogForm.actualAlimony"></el-input>
        </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDialog">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import workflowApi from '@/api/workflow/workFlow'
import {
  monthlyDetail,updateDailyWage
} from "@/api/wage";
export default {
  data() {
    return {
      formData: {
        date:null,
      },
      personId:null,
      serviceCorporationName:null,
      teamName:null,
      personName:null,
      dialogFormVisible: false,
      currentPage: 1,
      pageSize: 10,
      totalData: 0,
      dialogForm: {},
      tableData: [],
      //页面
      companyId: localStorage.getItem("companyId"),
      //table
      searchForm: {
        currentPage: 1,
        date: this.$route.query.date,
        endDate: null,
        pageSize: 10,
        serviceCorporationId: null,
        startDate: null,
        teamId: null,
      },
      //流程
      workForm: {
        type: "",
        applyNodeId: "",
        examineReason: "",
        workflowNodeList: [],
        currentWorkflowNode: {},
      },
      finishStatus: "success",
      processStatus: "process",
      stepIndex: 2,
      workflowApplyId: null,
    };
  },
  async created(){
    this.personId = this.$route.query.personId
    // console.log('personId',this.personId);
    this.formData.date = this.$route.query.date
    console.log('route',this.$route.query);
    this.searchForm.date=this.$route.query.date
    console.log(this.searchForm.date);
    var workflowApplyId = this.$route.query.workflowApplyId;
    if (workflowApplyId) {
      this.workflowApplyId = workflowApplyId;
      this.getTableListExamineWorkflowApply();
    }
    console.log(1111,this.workflowApplyId);
    this.getStatisticList()
  },
  methods: {
    //table
    changeMonth(row){
      this.formData.date = row
    },
    onSubmit() {
      console.log(this.formData)
      this.getStatisticList()
    },
    getStatisticList(){
      monthlyDetail({
        currentPage:this.currentPage,
        pageSize:this.pageSize,
        personId:this.personId,
        date:this.formData.date
      }).then(res=>{
        console.log('tableData',res);
        var tableData = res.data.data.records
        this.tableData = tableData
        this.totalData = res.data.data.total
        if(tableData.length>0){
          this.serviceCorporationName=tableData[0].serviceCorporationName
          this.teamName=tableData[0].teamName
          this.personName=tableData[0].personName
        }
        console.log('tableData',this.tableData);
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getStatisticList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getStatisticList()
    },
    checkRow(res, index) {
      console.log('日调整',res)
      this.dialogForm = {
        alimony:res.alimony,
        wage:res.wage,
        actualDailyWage: res.actualWage,
        actualAlimony: res.actualAlimony,
        date:res.day,
        personId:res.personId
      },
      this.dialogFormVisible = true
    },
    confirmRow(res) {
     this.$confirm("是否确认" + res.personName + "的日工资?", "日工资确认", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "确认日工资成功!",
          });
          this.getStatisticList()
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消确认",
          });
        });
    },
    // 弹窗确认
    confirmDialog() {
      // this.dialogFormVisible = false;
      // console.log(this.dialogForm);
      updateDailyWage({
        actualAlimony: this.dialogForm.actualAlimony,
        actualDailyWage: this.dialogForm.actualDailyWage,
        date: this.dialogForm.date,
        personId: this.personId,
        alimony: this.dialogForm.alimony,
        dailyWage: this.dialogForm.wage,
      }).then((e) => {
        this.getStatisticList()
        this.dialogFormVisible = false;
      });
    },
    //节点
    getTableListExamineWorkflowApply() {
      console.log("workflowApplyId", this.workflowApplyId);
      workflowApi
        .getWorkflowApplyInfo({ applyId: this.workflowApplyId })
        .then((res) => {
          console.log(res);
          this.workForm = res.data;
          console.log(this.workForm);
        });
    },
    getCurrentActive(workflowNodeList, currentWorkflowNode) {
      let active = 0;
      let processStatus = "success";
      let that = this;
      workflowNodeList.forEach(function (element, index) {
        if (currentWorkflowNode !== null) {
          if (element.applyNodeId === currentWorkflowNode.applyNodeId) {
            active = index;
            that.workForm.applyNodeId = element.applyNodeId;
            processStatus = "process";
          }
        } else {
          if (element.workflowNodeStatus === "3") {
            active = index;
            processStatus = "error";
          } else if (element.workflowNodeStatus === "2") {
            active = index;
            processStatus = "success";
          }
        }
      });
      this.processStatus = processStatus;
      return active;
    },
    convertStatus(status) {
      let newStatus = "未知";
      switch (status) {
        case "1":
          newStatus = "待审核";
          break;
        case "2":
          newStatus = "审核中";
          break;
        case "3":
          newStatus = "已审核";
          break;
        case "4":
          newStatus = "已驳回";
          break;
        case "5":
          newStatus = "已撤回";
          break;
      }
      return newStatus;
    },
  },
};
</script>
<style lang="scss" scope>
.details-steps {
  min-height: 100px;
  background-color: #ffffff;
  padding: 50px 0;
  border-bottom: solid 1px #e4e4e4;
  .el-steps {
    width: 80%;
    margin: 0 auto;
  }
  .el-step__line {
    margin-left: 145px;
  }
  .is-success {
    border-color: #1abc9c;
    color: #1abc9c;
  }
  .el-step__description{
    font-size: 13px;
  }
  .el-step__main {
    margin-left: 30px;
    margin-top: -30px;
    .el-step__title {
      font-weight: bold;
    }
  }
}
</style>
